<template>
	<!-- 主页面 -->
	<view class="page-container" v-if="false">
		<button @click="showModal = true" class="publish-btn">发布内容</button>
	</view>

	<!-- 发布类型选择弹窗 -->
	<uni-popup ref="popup" type="center" :mask-click="false">
		<view class="publish-modal">
			<view class="modal-header" v-if="false">
				<text class="modal-title">选择发布的类型</text>
				<uni-icons type="close" size="24" color="#999" @click="closeModal"></uni-icons>
			</view>

			<view class="option-container">
				<!-- 发布帖子选项 -->
				<view class="option-card" :style="{ transform: 'rotateY(5deg)' }" @click="selectOption('post')">
					<image class="option-icon" src="/static/logo.png"
						mode="aspectFit"></image>
					<view class="option-content">
						<text class="option-title">发布帖子</text>
						<text class="option-desc">以图代笔，分享大学生活点滴~</text>
					</view>
				</view>

				<!-- 跑腿/互助选项 -->
				<view class="option-card" :style="{ transform: 'rotateY(-5deg)' }" @click="selectOption('help')">
					<image class="option-icon" src="/static/logo.png"
						mode="aspectFit"></image>
					<view class="option-content">
						<text class="option-title">跑腿/互助</text>
						<text class="option-desc">发布悬赏，请同学帮忙跑腿等~</text>
					</view>
				</view>
			</view>
		</view>
	</uni-popup>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import {
		onReady
	} from '@dcloudio/uni-app'

	// 模拟数据
	const hotList = ref([
		'校园周边新开了一家奶茶店，同学们快去打卡',
		'求代课：周三上午三四节计算机课程',
		'图书馆自习室新增了充电插座',
		'校园跑腿互助需求激增，快来参与',
		'毕业季二手交易市场火热进行中'
	])

	const showModal = ref(false)
	const popup = ref(null)

	// 方法
	const openModal = () => {
		popup.value.open()
	}
	const closeModal = () => {
		popup.value.close()
	}

	const selectOption = (type) => {
		// closeModal()
		uni.showToast({
			title: `选择了${type === 'post' ? '发布帖子' : '跑腿/互助'}`,
			icon: 'none'
		})
		
		// 跳转到对应发布页面
		uni.navigateTo({  url: type==='post' ? '/pages_help/pubPost/pubPost' : '/pages_help/pubSender/pubSender'	})
	}

	onReady(() => {
		// 初始化popup引用
	})
</script>

<style lang="scss">
	.page-container {
		padding: 40rpx;
		display: flex;
		flex-direction: column;
		align-items: center;

		.publish-btn {
			width: 80%;
			margin-bottom: 40rpx;
			background-color: #1989fa;
			color: #fff;
			border-radius: 50rpx;
		}
	}

	// 弹出框
	.publish-modal {
		width: 700rpx;
		height: 750rpx;
		position: fixed;
		bottom: 50rpx;
		left: 20rpx;
		justify-content: space-around;
		background-color: #fff;
		box-shadow: 0 -1rpx 5rpx rgba(0, 0, 0, 0.05);
		z-index: 1000;
		border-radius: 20rpx;
		border: 1rpx solid #eee;
	

		.modal-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 40rpx;

			// 标题
			.modal-title {
				font-size: 32rpx;
				font-weight: bold;
				color: #333;
				margin: auto;
			}
		}

		.option-container {
			display: flex;
			flex-direction: column;
			gap: 30rpx;
			margin: 30rpx 30rpx 0rpx 30rpx;
			

			.option-card {
				display: flex;
				align-items: center;
				padding: 30rpx;
				background-color: #f9f9f9;
				border-radius: 16rpx;
				border: 1rpx solid #eee;
				box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
				transition: all 0.3s ease;
				perspective: 1000px;
				transform-style: preserve-3d;

				&:active {
					transform: scale(0.98) rotateY(0deg);
				}

				.option-icon {
					width: 80rpx;
					height: 80rpx;
					border-radius: 50%;
					margin-right: 24rpx;
					flex-shrink: 0;
				}

				.option-content {
					display: flex;
					flex-direction: column;

					.option-title {
						font-size: 28rpx;
						font-weight: bold;
						color: #333;
						margin-bottom: 8rpx;
					}

					.option-desc {
						font-size: 24rpx;
						color: #666;
					}
				}
			}
		}
	}
</style>